<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 练习：1.圆形	2.正三角形
			 思路1：宽高与边框倒角一直
			 */
			div#cirle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 50px 50px red inset;
			}
			/* 
			 思路2：div#triangle
							css中：抓到div 	【斜线】
								左边框：50像素实线红色
								右边框：50像素实线黄色
								下边框：50像素实现黑色
				注意：先别加宽高	transparent 透明色
				 */
			div#triangle{
				width: 0;
				/* 
				 border-left: 50px solid transparent;
				 border-right: 50px solid transparent;
				 border-bottom: 50px solid green; 
				 */
				/* 两行，倒三角，蓝色，透明度 .3
				 提醒：所有边框：50px solid transparent
					  上边框颜色改成蓝色	0，0，255
				 */
				border: 50px solid transparent;
				border-right: rgba(0, 0, 255, .3);
			}
			/* outline	边框轮廓	只针对input	元素 */
			input{
				outline: 1px solid red;
			}
					/* 实际应用：通配选择器 去掉轮廓
					 *{ outline: 0;}
					 */
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text" />
	</body>
</html>